/*
* @Description: 广告管理
* @Author: kanglin
* @Date: 2018-06-19 16:26:12
* @Copyright: Created by Panxsoft.
*/

<style lang="less" scoped rel="stylesheet/less" type="text/less">
  @deep: ~">>>";
  .v-customer-advert {
    padding: 20px;
  }

  @{deep} .ivu-modal-body {
    min-height: 400px;
  }

</style>

<template>
  <div class="v-customer-advert">
    <Tabs
      type="card"
      @on-click="handleClickTab">

      <TabPane
        :label="$t('common.create')"
        name="create">
        <advert-create
          :store-devices="store_devices"
          :packs="packs"
          :products="products"
          :post="postAdvert"
          :bos-config="bos_config" />
      </TabPane>

      <TabPane
        :label="$t('common.check')"
        name="list">
        <advert-index
          :loading="is_list_loading"
          :delete="handleDeleteAdvert"
          :edit="handleEditAdvert"
          :adverts="adverts.data" />
        <br>

        <Row
          type="flex"
          justify="center">
          <Page
            :total="adverts.total"
            :current="adverts.current_page"
            :page-size="adverts.per_page"
            :page-size-opts="[15,20,50]"
            placement="top"
            show-sizer
            show-total
            @on-change="handlePageChange"
            @on-page-size-change="handlePageSizeChage" />

        </Row>

      </TabPane>
    </Tabs>

    <Modal
      v-model="is_show_modal"
      :title="$t('advert.edit_advert')"
      class-name="vertical-middle-modal">
      <div slot="footer" />
      <advert-edit
        v-if="is_show_modal"
        :advert="current_advert"
        :store-devices="store_devices"
        :packs="packs"
        :products="products"
        :update="updateAdvert"
        :bos-config="bos_config" />
    </Modal>

  </div>
</template>

<script>

  import API_LIST from 'src/API_LIST'
  import advertIndex from './index'
  import advertCreate from './create'
  import advertEdit from './edit'

  export default {
    name: 'AdvertViews',
    components: {
      'advert-index': advertIndex,
      'advert-create': advertCreate,
      'advert-edit': advertEdit,
    },
    data() {
      return {
        queryForm: {},
        pageQueryForm: {
          per_page: 15,

          page: 1,
        }, // 分页参数
        adverts: {
          data: [],
          current_page: 1,
          per_page: 15,
          total: 0,
        }, // 广告信息

        bos_config: {},
        store_devices: [],
        is_show_modal: false,
        current_advert: {
          advert_type_id: 1, // 广告类别id 1 图片 2 视频
          name: null, // 广告名称
          // content_key: null, // 广告内容 bos的key值 ，create方法获取bos 配置
          play_second: 60, // 播放时长
          device_account_ids: [],
          redirectable_type: '',
          redirectable_id: 0,
        },
        is_list_loading: false, // 加载
        packs: [],
        products: [],
      }
    },
    mounted() {
      this.fetchInitialData()
    },
    methods: {
      /**
       *  请求广告列表
       * @param {object} params {查询参数}
       * @return {undefined}
       */
      fetchAdvertsIndex(params = {}) {
        this.is_list_loading = true
        this.$http.get(API_LIST.ADVERT, {params})
          .then(({data}) => {
            if (data.code !== 0) {
              throw new Error(data.error)
            } else {
              this.adverts.data = data.adverts.data
              this.adverts.current_page = data.adverts.current_page
              this.adverts.per_page = parseInt(data.adverts.per_page, 10)
              this.adverts.total = data.adverts.total
            }
          })
          .catch((error) => {
            this.$Message.error(error.message)
          })
          .then(() => {
            this.is_list_loading = false
          })
      },

      /**
       *  请求初始化数据
       *  @return {undefined}
       */
      fetchInitialData() {
        this.fetchCreateData()
        this.fetchPacksData()
        this.fetchAssetsData()
      },

      fetchCreateData() {
        this.$http.get(`${API_LIST.ADVERT}/create`)
          .then(({data}) => {
            if (data.code !== 0) {
              throw new Error(data.error)
            } else {
              const {bos_config, store_devices} = data
              this.bos_config = bos_config
              this.store_devices = store_devices
            }
          })
          .catch((error) => {
            this.$Message.error(error.message)
          })
      },

      fetchPacksData() {
        this.$http.get(`${API_LIST.CUSTOMER_PACK}?per_page=1000`)
          .then(({data}) => {
            if (data.code !== 0) {
              throw new Error(data.error)
            } else {
              this.packs = data.packs.data
            }
          })
          .catch((error) => {
            this.$Message.error(error.message)
          })
      },

      fetchAssetsData() {
        this.$http.get(`${API_LIST.CUST_PRODUCT}?per_page=1000`)
          .then(({data}) => {
            if (data.code !== 0) {
              throw new Error(data.error)
            } else {
              this.products = data.products.data
            }
          })
          .catch((error) => {
            this.$Message.error(error.message)
          })
      },

      /**
       * 删除广告接口
       * @param  {Number} id {广告ID}
       * @return {undefined} {description}
       */
      deleteAdvert(id) {
        return this.$http.delete(`${API_LIST.ADVERT}/${id}`)
          .then(({data}) => {
            if (data.code !== 0) {
              throw new Error(data.error)
            } else {
              // this.fetchAdvertsIndex(this.pageQueryForm);
              return data
            }
          })
      },

      /**
       * 上传广告
       * @param {Object} form {新增表单数据}
       * @return {undefined}
       */
      postAdvert(form) {
        return this.$http.post(API_LIST.ADVERT, form)
          .then(({data}) => {
            if (data.code !== 0) {
              throw new Error(data.error)
            } else {
              return data
            }
          })
      },

      /**
       *  更新广告
       *  @param {Number} id {广告ID}
       *  @param {Object} form {更新表单数据}
       *  @return {undefined}
       */
      updateAdvert({id, form}) {
        const body = {...form, _method: 'put'}
        return this.$http.post(`${API_LIST.ADVERT}/${id}`, body)
          .then(({data}) => {
            if (data.code !== 0) {
              throw new Error(data.error)
            } else {
              this.fetchAdvertsIndex(this.pageQueryForm)
              this.is_show_modal = false
              return data
            }
          })
      },

      /**
       * tab 被点击时触发
       * @param {String} tab_name {表单是label值}
       * @return {undefined}
       */
      handleClickTab(tab_name) {
        if (tab_name === 'list') {
          this.fetchAdvertsIndex(this.pageQueryForm)
        }
      },

      /**
       * 页码改变
       * @param  {string} page {当前页码}
       * @return {undefined}
       */
      handlePageChange(page) {
        this.pageQueryForm.page = page
        this.fetchAdvertsIndex(this.pageQueryForm)
      },

      /**
       * 每页显示数改变
       * @param  {string} size {当前每页显示数}
       * @return {undefined}
       */
      handlePageSizeChage(size) {
        this.pageQueryForm.page = null
        this.pageQueryForm.per_page = size
        this.fetchAdvertsIndex(this.pageQueryForm)
      },

      /**
       * 删除广告
       * @param {Number} id {广告ID}
       * @return {undefined}
       */
      handleDeleteAdvert(id) {
        this.deleteAdvert(id)
          .then((result) => {
            if (result) {
              this.adverts.data = this.adverts.data.filter(item => item.id !== id)
              this.$Message.success(this.$t('common.operate_success'))
            }
          })
          .catch((error) => {
            this.$Message.error(error.message)
          })
      },

      /**
       * 编辑
       * @param {Object} detail {广告详情对象}
       * @return {undefined}
       */
      handleEditAdvert(detail) {
        this.current_advert = detail
        this.is_show_modal = true
      },
    },
  }
</script>
